<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .top{
                height: 60px;
                width: 1903px;
            }
            .top-1 a{
                text-decoration: none;
                margin-top: 19px;
                margin-left: 31px;
                font-size: 13px;
                display: inline-block;
                color: black;
            } 
            .top-2{
                float: right;
            }
            .top-2 p{
                float: right;
                margin-top: -21px;
                background-color: #4e6ef2;
                border-radius: 5px;
            }
            .top-2 p:hover{
                border-radius: 5px;
                background: rgb(37, 37, 207);
            }
            .top-2 li{
                float: right;
                margin-top: -21px;
                margin-right: 80px;
            }
            .top-2 a{
                text-decoration: none;
                color: black;
                font-size: 15px;
            }
            .header{
                height: 173px;
                margin-bottom: 63px;
            }
            .header img{
                height: 130px;
                width: 260px;
            }
            .header h1{
                text-align:center;
            }
            .con{
                height: 300px;
                width: 512px;
                margin: 0px auto;
            }
            .input-text{
                height: 40px;
                width: 400px;
                border: 1px solid #4e6ef2;
                padding: 0px;
                outline:none;
                float: left;
            }
            .input-sub{
                height: 42px;
                width: 100px;
                background: #4e6ef2;
                border: 0px;
                float: left;
                color: white;
                cursor: pointer;
            }
            .center{
                height: 140px;
                width: 820px;
                margin: auto;
            }
            .center-left{
                height: 140px;
                width: 410px;
                float: left;
            }
            .center-left p{
                margin-bottom: 20px;
            }
            .center-right{
                height: 140px;
                width: 410px;
                float: right;
            }
            .center-right ul{
                float: right;
            }
            .center-right p{
                margin-bottom: 20px;
            }
            .center a{
                text-decoration: none;
                color: black;
            }
            .fotter{
                height: 40px;
                width: 1383px;
                margin: auto;
                margin-top: 450px;
            }
            .fotter h6{
                float: left;
                margin-right: 40px;
                margin-top: 10px;
                text-align:center;
                color: #bbbbbb;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="top-1">
                <a href="http://news.baidu.com/"target="_blank">新闻</a>
                <a href="https://www.hao123.com/"target="_blank">hao123</a>
                <a href="https://map.baidu.com/"target="_blank">地图</a>
                <a href="https://live.baidu.com/"target="_blank">直播</a>
                <a href="https://haokan.baidu.com/"target="_blank">视频</a>
                <a href="http://tieba.baidu.com"target="_blank">贴吧</a>
                <a href="https://xueshu.baidu.com/"target="_blank">学术</a>
                <a href="https://www.baidu.com/more/"target="_blank">更多</a>
            </div>
            <div class="top-2">
                <ul>
                    <p><a href="https://passport.baidu.com/"target="_blank">登录</a></p>
                    <li><a href="">设置</a></li>
                </ul>
            </div>
        </div>
        <div class="header">
            <h1>
                <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs"target="_blank"><img src="logo.png" alt=""></a>
            </h1>     
            <div class="con">
                <form class="search-form">
                    <input type="text" class="input-text" placeholder="">
                    <input type="submit" value="百度一下" class="input-sub">
                </form>
            </div>
        </div>
        <div class="center">
            <div class="center-left">
                <ul>
                    <p><a href="">百度热搜榜</a></p>
                    <p><a href="">1  31省份新增确诊15例：本土1例在云南</a></p>
                    <p><a href="">2  中方决定对冰岛有关人员实施制裁</a></p>
                    <p><a href="">3  第一次见菅义伟拜登带了两只口罩</a></p>
                </ul>
            </div>
            <div class="center-right">
                <ul>
                    <p><a href="">换一换</a></p>
                    <p><a href="">4 骚扰学生的武大副教授曾两度被约谈</a></p>
                    <p><a href="">5 爸爸喝醉酒后女儿即兴改歌吐槽</a></p>
                    <p><a href="">6 黄晓明因减肥身体出现问题</a></p>
                </ul>
            </div>
        </div>
        <div class="fotter">
            <h6>设为首页</h6>
            <h6>关于百度</h6>
            <h6>about Baidu</h6>
            <h6>百度营销</h6>
            <h6>使用百度前必读</h6>
            <h6>意见反馈</h6>
            <h6>帮助中心</h6>
            <h6>京公网安备11000002000001</h6>
            <h6>京lcp证030173号</h6>
            <h6>©2021 Baidu</h6>
            <h6>(京)-经营性-2017-0020</h6>
        </div>
    </body>
</html>